<template>
  <div class="shopcart">
    <ul>
      <li v-for="item in shopcart" :key="item.id">
        <img :src="item.src">
        <div>
          <p>{{item.title}} * {{item.num}}</p>
          <p>￥{{item.price}}</p>
          <button @click="del(item)">删除</button>
        </div>
      </li>
    </ul>
    <p v-if="shopcart.length">总价：{{totalPrice}}</p>
    <p v-else>购物车暂无商品</p>
  </div>
</template>

<script>
  export default {
    name: 'ShopCart',
    computed: {
      shopcart() {
        return this.$store.state.shopcart
      },
      totalPrice() {
        return this.$store.getters.totalPrice
      }
    },
    methods: {
      del(item) {
        this.$store.commit('del',item)
      }
    }
  }
</script>

<style scoped>
  .shopcart {
    padding-bottom: 50px;
  }

  li {
    display: flex;
    padding: 10px;
    border-bottom: 1px dashed #ccc;
  }

  .shopcart div {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  img {
    width: 25%;
    border: 1px solid #ccc;
  }

  li div p:first-child {
    font-size: 14px;
  }

  li div p:nth-child(2) {
    color: #f00;
  }

  button {
    color: white;
    background-color: coral;
    border: none;
    width: 80px;
    height: 25px;
  }

  .shopcart p:last-child {
    padding: 10px;
  }
</style>
